<template>
    <!-- 商家注册开始 首页-->
    <view>
        <up-navbar placeholder title="商家注册" :autoBack="true" bgColor="rgba(255,255,255,0)"></up-navbar>
        <image src="@/static/images/img/sgbg.png" class="w-[100%] h-[40vh] z-[-1] absolute top-0"></image>
        <view class="ml-[32rpx] w-[686rpx] h-[180rpx] mt-[57rpx] flex items-center justify-around bg-[#FDF8E9]">
            <view class="w-[112rpx] h-[116rpx] flex flex-col items-center justify-center">
                <view class="text-[48rpx] font-[900] text-center font-[D-DIN-PRO-ExtraBold]">01</view>
                <view class="font-[500] text-[28rpx] text-[#000000] text-center">基本信息</view>
            </view>
            <view>
                -------
            </view>
            <view class="w-[112rpx] h-[116rpx] flex flex-col items-center justify-center">
                <view class="text-[48rpx] font-[900] text-center  font-[D-DIN-PRO-ExtraBold]">02</view>
                <view class="font-[500] text-[28rpx] text-[#000000] text-center">资质认证</view>
            </view>
            <view>
                -------
            </view>
            <view class="w-[112rpx] h-[116rpx] flex flex-col items-center justify-center">
                <view class="text-[48rpx] font-[900] text-center  font-[D-DIN-PRO-ExtraBold]">03</view>
                <view class="font-[500] text-[28rpx] text-[#000000] text-center">等待审核</view>
            </view>
        </view>
        <!-- 商户类型 -->
        <view class="w-[686rpx] h-[818rpx] bg-[#FFFFFF] mx-[32rpx] mt-[20rpx] rounded-[16rpx] p-[16rpx]">
            <view class="mb-[20rpx]">
                <view class="sh">商户类型</view>
                <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>
            </view>
            <!-- 按钮 -->
            <view class="mt-[30rpx] flex  mb-[40rpx]">
                <view class="w-[204rpx] h-[64rpx] ">
                    <up-button @click="selectType(0)" text="个人" :customStyle="{
                        color: merchantType == 0 ? '#FFEFB8' : '#000000',
                        padding: '12rpx 74rpx',
                        fontWeight: '500',
                        borderRadius: '8rpx',
                        fontSize: '28rpx',
                        lineHeight: '40rpx',
                        background: merchantType == 0 ? 'linear-gradient( 98deg, #454545 0%, #000000 100%)' : '#FFEFB8'
                    }"></up-button>
                </view>
                <view class="w-[204rpx] h-[64rpx] mx-[22rpx] ">
                    <up-button @click="selectType(1)" text="个体" :customStyle="{
                        color: merchantType == 1 ? '#FFEFB8' : '#000000',
                        padding: '12rpx 74rpx',
                        fontWeight: '500',
                        borderRadius: '16rpx',
                        fontSize: '28rpx',
                        lineHeight: '40rpx',
                        background: merchantType == 1 ? 'linear-gradient( 98deg, #454545 0%, #000000 100%)' : '#FFEFB8'
                    }"></up-button>
                </view>
                <view class="w-[204rpx] h-[64rpx] mr-[16rpx]">
                    <up-button @click="selectType(2)" text="企业" :customStyle="{
                        color: merchantType == 2 ? '#FFEFB8' : '#000000',
                        padding: '12rpx 74rpx',
                        fontWeight: '500',
                        borderRadius: '16rpx',
                        fontSize: '28rpx',
                        lineHeight: '40rpx',
                        background: merchantType == 2 ? 'linear-gradient( 98deg, #454545 0%, #000000 100%)' : '#FFEFB8'
                    }"></up-button>
                </view>
            </view>

            <!-- 表单项 -->
            <view class="mb-[30rpx]">
                <view class="flex items-center justify-between py-[20rpx] border-b border-[#ECECEC] border-[2rpx]">
                    <text class="text-[28rpx] text-[#333333]">车行名称</text>
                    <input 
                        v-model="formData.shopName" 
                        placeholder="请输入" 
                        placeholder-class="text-[#CCCCCC]"
                        class="text-[28rpx] text-left w-[70%]"
                    />
                </view>
            </view>
            
            <view class="mb-[30rpx]">
                <view class="flex items-center justify-between py-[20rpx] border-b border-[#EEEEEE]">
                    <text class="text-[28rpx] text-[#333333]">您的姓名</text>
                    <input 
                        v-model="formData.personName" 
                        placeholder="请输入" 
                        placeholder-class="text-[#CCCCCC]"
                        class="text-[28rpx] text-left w-[70%]"
                    />
                </view>
            </view>
            
            <view class="mb-[30rpx]">
                <view  @click="toMap" class="flex items-center justify-between py-[20rpx] border-b border-[#EEEEEE]" >
                    <text class="text-[28rpx] text-[#333333]">经营所在地</text>
                    <view class="flex items-center justify-end">
                        <text class="text-[28rpx] text-[#CCCCCC]">{{ formData.regionName }}</text>
                        <text class="text-[28rpx] ml-[10rpx]">></text>
                    </view>
                </view>
            </view>
            
            <view class="mb-[30rpx] w-[656rpx] h-[236rpx]">
                <view class="text-[28rpx] mb-[10rpx]">详细地址</view>
                <up-textarea class="mt-[30rpx]" v-model="formData.addressDetail" placeholder="请输入" ></up-textarea>
                <!-- <up-textarea
                    v-model="formData.address"
                    placeholder="请输入"
                    :height="200"
                    :customStyle="{
                        backgroundColor: '#F8F8F8',
                        padding: '20rpx',
                        borderRadius: '8rpx',
                        fontSize: '28rpx'
                    }"
                ></up-textarea> -->
            </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class=" w-[750rpx] p-[32rpx] mt-[58rpx]">
            <!-- <up-button text="下一步" :customStyle="{
                backgroundColor: '#DADADA',
                color: '#999999',
                height: '90rpx',
                fontSize: '28rpx',
                marginBottom: '20rpx'
            }"></up-button>
            <up-button text="下一步" :customStyle="{
                backgroundColor: '#000000',
                color: '#FFFFFF',
                height: '90rpx',
                fontSize: '28rpx'
            }" @click="nextStep"></up-button> -->
            <!-- <view class="h-[88rpx] ">
                    <up-button  text="下一步" :customStyle="{
                        color: '#B2B2B2',
                        padding: '12rpx 74rpx',
                        fontWeight: '500',
                        borderRadius: '16rpx',
                        fontSize: '28rpx',
                        lineHeight: '40rpx',
                        background:'#DADADA'
                       
                    }"></up-button>
            </view> -->
            <view class="h-[88rpx]">
                    <up-button @click="nextStep" text="下一步" :customStyle="{
                        color:  '#FFEFB8',
                        padding: '12rpx 74rpx',
                        fontWeight: '500',
                        borderRadius: '16rpx',
                        fontSize: '28rpx',
                        lineHeight: '40rpx',
                        background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)'
                    }"></up-button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const merchantType = ref(0); // 默认选中个人（0）
const selectType = (type) => {
    merchantType.value = type;
};
const latitude = ref(0);
const longitude = ref(0);



const formData = ref({
    shopName: '',
    personName: '',
    regionName: '', // 默认值
    addressDetail: ''
});
const toMap = () => {
    wx.chooseLocation({
        success: function (res) {
            console.log('选择的地址信息是', res);
            // 从地址中提取省市信息
            const address = res.address || '';
            // 尝试提取省市信息，通常格式为：省份市区详细地址
            let provinceCityRegion = '';
            
            // 判断是否为直辖市
            const directCities = ['北京市', '上海市', '天津市', '重庆市'];
            const isDirectCity = directCities.some(city => address.startsWith(city));
            
            if (isDirectCity) {
                // 直辖市处理逻辑
                const directCityMatch = address.match(/^(北京市|天津市|上海市|重庆市)/);
                const directDistrictMatch = address.match(/^(北京市|天津市|上海市|重庆市)(.*?区|.*?县|.*?市)/);
                
                const directCity = directCityMatch ? directCityMatch[1] : '';
                const district = directDistrictMatch ? directDistrictMatch[2] : '';
                
                // 直接组合为"直辖市 区"格式，不重复显示市名
                provinceCityRegion = district ? `${directCity} ${district}` : directCity;
            } else {
                // 普通省份处理逻辑
                const provinceMatch = address.match(/^(.*?省|.*?自治区)/);
                
                if (provinceMatch) {
                    const province = provinceMatch[1];
                    provinceCityRegion = province;
                    
                    // 提取省份后的剩余地址
                    const afterProvince = address.substring(province.length);
                    
                    // 尝试匹配市级行政区（包括特殊行政区如雄安新区）
                    const cityMatch = afterProvince.match(/^(.*?市|.*?地区|.*?盟|.*?新区|.*?特别行政区)/);
                    if (cityMatch) {
                        const city = cityMatch[1];
                        provinceCityRegion += ' ' + city;
                        
                        // 提取市级后的剩余地址
                        const afterCity = afterProvince.substring(city.length);
                        
                        // 尝试匹配区县级行政区
                        const districtMatch = afterCity.match(/^(.*?区|.*?县|.*?旗|.*?镇)/);
                        if (districtMatch) {
                            const district = districtMatch[1];
                            provinceCityRegion += ' ' + district;
                        }
                    } else {
                        // 直接尝试匹配区县级行政区（针对省直辖县级行政区）
                        const directDistrictMatch = afterProvince.match(/^(.*?区|.*?县|.*?旗|.*?镇)/);
                        if (directDistrictMatch) {
                            const district = directDistrictMatch[1];
                            provinceCityRegion += ' ' + district;
                        }
                    }
                }
            }
            
            // 如果无法提取，则使用地址名称作为区域名称
            if (!provinceCityRegion) {
                provinceCityRegion = res.name;
            }
            
            // 正确赋值给 formData
            formData.value.regionName = provinceCityRegion;
            formData.value.addressDetail = res.address;
            latitude.value = res.latitude;
            longitude.value = res.longitude;
        }
    });
};
// 从URL参数获取用户ID
const userId = ref('');

// 页面加载时获取参数
onLoad((options) => {
    // 设置商户类型
    if (options.merchantType) {
        merchantType.value = parseInt(options.merchantType);
    }
    
    // 设置用户ID
    if (options.userId) {
        userId.value = options.userId;
    } else {
        userId.value = uni.getStorageSync('userId') || '';
    }
    
    // 预填充表单数据
    if (options.shopName) {
        formData.value.shopName = decodeURIComponent(options.shopName);
    }
    
    if (options.personName) {
        formData.value.personName = decodeURIComponent(options.personName);
    }
    
    if (options.regionName) {
        formData.value.regionName = decodeURIComponent(options.regionName);
    }
    
    if (options.addressDetail) {
        formData.value.addressDetail = decodeURIComponent(options.addressDetail);
    }
});

const nextStep = () => {
    if (!formData.value.shopName || !formData.value.personName || !formData.value.addressDetail) {
        uni.showToast({
            title: '请填写完整信息',
            icon: 'none'
        });
        return;
    }
    uni.navigateTo({
        url: `/pages_qc/certification/certification?shopName=${encodeURIComponent(formData.value.shopName)}&personName=${encodeURIComponent(formData.value.personName)}&regionName=${encodeURIComponent(formData.value.regionName)}&addressDetail=${encodeURIComponent(formData.value.addressDetail)}&merchantType=${merchantType.value}&userId=${userId.value}`
    });
};
</script>

<style>
.sh {
    width: 128rpx;
    height: 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #000000;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
}
</style>
